<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate" />
        </ion-buttons>

        <ion-title>
            <h1>{{ 'addon.notes.notes' | translate }}</h1>
        </ion-title>
        <ion-buttons slot="end" />
    </ion-toolbar>
</ion-header>
<core-navbar-buttons slot="end">
    <ion-button [class.hidden]="!canDeleteNotes" slot="end" fill="clear" (click)="toggleDelete()"
        [ariaLabel]="'core.toggledelete' | translate">
        <ion-icon name="fas-pen" slot="icon-only" aria-hidden="true" />
    </ion-button>
    <core-context-menu>
        <core-context-menu-item [hidden]="!(notesLoaded && !hasOffline)" [priority]="100" [content]="'core.refresh' | translate"
            (action)="refreshNotes(false)" [iconAction]="refreshIcon" [closeOnClick]="true" />
        <core-context-menu-item [hidden]="!(notesLoaded && hasOffline)" [priority]="100"
            [content]="'core.settings.synchronizenow' | translate" (action)="refreshNotes(true)" [iconAction]="syncIcon"
            [closeOnClick]="false" />
    </core-context-menu>
</core-navbar-buttons>
<ion-content class="limited-width">
    <ion-refresher slot="fixed" [disabled]="!notesLoaded" (ionRefresh)="refreshNotes(false, $event.target)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
    </ion-refresher>

    <core-loading [hideUntil]="notesLoaded">
        @if (user) {
            <ion-item class="ion-text-wrap">
                <core-user-avatar [user]="user" [courseId]="courseId" slot="start" [linkProfile]="false" />
                <ion-label>
                    <p class="item-heading">{{user!.fullname}}</p>
                </ion-label>
            </ion-item>
        }

        <core-combobox [(selection)]="type" (selectionChange)="typeChanged()">
            <ion-select-option class="ion-text-wrap" value="site">
                {{ 'addon.notes.sitenotes' | translate }}
            </ion-select-option>
            <ion-select-option class="ion-text-wrap" value="course">
                {{ 'addon.notes.coursenotes' | translate }}
            </ion-select-option>
            <ion-select-option class="ion-text-wrap" value="personal">
                {{ 'addon.notes.personalnotes' | translate }}
            </ion-select-option>
        </core-combobox>

        @if (hasOffline) {
            <ion-card class="core-warning-card">
                <ion-item>
                    <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
                    <ion-label>
                        {{ 'core.thereisdatatosync' | translate:{$a: 'addon.notes.notes' | translate | lowercase } }}
                    </ion-label>
                </ion-item>
            </ion-card>
        }

        @if (notes && notes.length === 0) {
            <core-empty-box icon="fas-receipt" [message]="'addon.notes.nonotes' | translate" />
        } @else {
            <ion-card *ngFor="let note of notes">
                <ion-item class="ion-text-wrap">
                    @if (!userId) {
                        <core-user-avatar [user]="note" [courseId]="courseId" slot="start" />
                    }
                    <ion-label>
                        @if (!userId) {
                            <p class="item-heading">{{note.userfullname}}</p>
                        }
                        @if (!note.deleted && !note.offline) {
                            <p slot="end">
                                <span class="ion-text-wrap">{{note.lastmodified | coreDateDayOrTime}}</span>
                            </p>
                        }
                    </ion-label>
                    @if (note.offline) {
                        <p slot="end">
                            <ion-icon name="fas-clock" aria-hidden="true" /> <span class="ion-text-wrap">
                                {{ 'core.notsent' | translate }}
                            </span>
                        </p>
                    }
                    @if (note.deleted) {
                        <p slot="end">
                            <ion-icon name="fas-trash" aria-hidden="true" /> <span class="ion-text-wrap">
                                {{ 'core.deletedoffline' | translate }}
                            </span>
                        </p>
                        <ion-button slot="end" fill="clear" color="danger" (click)="undoDeleteNote($event, note)"
                            [ariaLabel]="'core.restore' | translate">
                            <ion-icon name="fas-rotate-left" slot="icon-only" aria-hidden="true" />
                        </ion-button>
                    }
                    @if (showDelete && !note.deleted && (type !== 'personal' || note.usermodified === currentUserId)) {
                        <ion-button slot="end" animate.enter="slide-in-right-animation" animate.leave="slide-out-right-animation"
                            fill="clear" color="danger" (click)="deleteNote($event, note)" [ariaLabel]="'core.delete' | translate">
                            <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true" />
                        </ion-button>
                    }
                </ion-item>
                <ion-item class="ion-text-wrap">
                    <ion-label>
                        <core-format-text [text]="note.content" [filter]="false" [sanitize]="note.offline" />
                    </ion-label>
                </ion-item>
            </ion-card>

        }
    </core-loading>

    @if (userId && notesLoaded) {
        <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end">
            <ion-fab-button (click)="addNote($event)" [attr.aria-label]="'addon.notes.addnewnote' |translate">
                <ion-icon name="fas-plus" aria-hidden="true" />
                <span class="sr-only">{{ 'addon.notes.addnewnote' | translate }}</span>
            </ion-fab-button>
        </ion-fab>
    }
</ion-content>
